<!-- CommentList.vue -->
<template>
  <div v-for="comment in comments" :key="comment.id">
    <CommentItem :comment="comment" />
    <!-- 递归渲染子评论 -->
    <CommentList
        v-if="comment.children?.length"
        :comments="comment.children"
        @reply="$emit('reply', $event)"
    />
  </div>
</template>

<script setup>
import CommentItem from './CommentItem.vue'
import CommentList from './CommentList.vue'

</script>

<!--
<template>
  <div class="comment-section">
    &lt;!&ndash; 评论输入框 &ndash;&gt;
    <el-form :model="form" @submit.prevent="submitComment">
      <el-input
          v-model="form.content"
          type="textarea"
          :rows="3"
          placeholder="写下你的评论..."
      />
      <el-button type="primary" native-type="submit">发表评论</el-button>
    </el-form>

    &lt;!&ndash; 评论树渲染 &ndash;&gt;
    <div v-for="comment in commentTree" :key="comment.id">
      <CommentItem
          :comment="comment"
          @reply="handleReply"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import request from '代码/code/vue/src/utils/request'

const props = defineProps(['writtenId'])
const emit = defineEmits(['refresh'])

const form = ref({ content: '', parentId: null })
const commentTree = ref([])

// 加载评论树
const loadComments = async () => {
  const res = await request.get(`/comment/tree/${props.writtenId}`)
  commentTree.value = res.data
}

// 提交评论
const submitComment = async () => {
  await request.written('/comment', {
    writtenId: props.writtenId,
    content: form.value.content,
    parentId: form.value.parentId
  })
  form.value = { content: '', parentId: null }
  loadComments()
}

// 处理回复动作
const handleReply = (parentId) => {
  form.value.parentId = parentId
  // 可添加@用户名效果（需扩展用户数据）
}

onMounted(() => {
  loadComments()
})
</script>-->
